<html xmlns:th="http://www.thymeleaf.org">
<div class="layui-card">
    <div class="layui-card-header">
        列表
        <button class="layui-btn layui-btn-xs" style="float: right;margin-top: 11px" id="ADDAD">
            <i class="layui-icon">&#xe654;</i>新增
        </button>
    </div>
</div>

<table id="demo" lay-filter="test"></table>
<script th:inline="javascript">
    layui.use(['form','layer','jquery','table','element'],function(){
        var table = layui.table;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.jquery;
        $('#ADDAD').click(function(){
            openwindows(/*[[${#httpServletRequest.getContextPath()+'/admin/ads/info'}]]*/,null,$)
        });
        //执行渲染
        table.render({
            elem: '#demo', //指定原始表格元素选择器（推荐id选择器）
            id:"test",
            height: "full",//容器高度
            url:/*[[${#httpServletRequest.getContextPath()+'/admin/ads/pageList'}]]*/,
            method:"post",
            cols: [[
                {field: 'id', title: 'ID', width:80},
                {field: 'imgurl', title: '图片',toolbar:"#imgtemplet"},
                {field: 'order', title: '排序值'},
                {field: 'time', title: '有效期',toolbar:"#timetemplet"},
                {field: 'open', title: '状态',toolbar:"#opentemplet"},
                {title:"操作",toolbar:"#operation"}
            ]]
        });
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event=="edit"){
                openwindows(/*[[${#httpServletRequest.getContextPath()+'/admin/ads/info'}]]*/,{id:data.id},$)
            }else if(obj.event=="del"){
                layer.confirm('是否删除该数据？', {
                    btn: ['确定', '取消']
                }, function(index, layero){
                    ajaxUtil(/*[[${#httpServletRequest.getContextPath()+'/admin/ads/delAD'}]]*/,{id:data.id},function() {
                        layer.alert('操作成功', {icon: 1},function(index){
                            table.reload("test",{});
                            layer.close(index)
                        });
                    });
                    layer.close(index)
                }, function(index){
                    layer.close(index);
                });
            }else if(obj.event=="open"){
                layer.confirm('确定开启吗？', {
                    btn: ['确定', '取消']
                }, function(index, layero){
                    ajaxUtil(/*[[${#httpServletRequest.getContextPath()+'/admin/ads/updateByOpen'}]]*/,{id:data.id},function() {
                        layer.alert('操作成功', {icon: 1},function(index){
                            table.reload("test",{});
                            layer.close(index)
                        });
                    });
                    layer.close(index)
                }, function(index){
                    layer.close(index);
                });
            }
        })

    })
</script>

<script type="text/html" id="opentemplet">
       {{#      if(d.open){      }}
            开启
       {{#     }else{  }}
            关闭
       {{#     }       }}
</script>

<script type="text/html" id="timetemplet">
    {{#     if(d.valid_start_time==null){    }}
        无限期
    {{#  }else{    }}
    {{     new Date(d.valid_start_time).Format("yyyy-MM-dd")  }}
    至
    {{      new Date(d.valid_end_time).Format("yyyy-MM-dd")  }}
    {{#     }    }}
</script>

<script type="text/html" id="imgtemplet" th:inline="javascript">
    {{# var img = [[${#httpServletRequest.getContextPath()}]] }}
    <img style="width: 28px; height: 28px;" src="{{img+d.imgurl}}" />
</script>

<script type="text/html" id="operation">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    {{# if(d.open){ }}
    <a class="layui-btn layui-btn-xs" lay-event="open">关闭</a>
    {{# }else{  }}
    <a class="layui-btn layui-btn-xs" lay-event="open">开启</a>
    {{#     }  }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</html>